<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%"></div>
	<script type="text/javascript" src="../JS/echarts.min.js"></script>
	<script type="text/javascript" src="../JS/jquery.js"></script>
	<script type="text/javascript">
		var myUrl = "SpendingPlan/selectList";
		var josnData = {
			data : {
				id : 1
			}
		}

		var result = null;

		ajaxUtil(myUrl, josnData, function(data) {
			result = data;

			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
			option = {
				title : {
					text : '某地区蒸发量和降水量',
					subtext : '纯属虚构'
				},
				tooltip : {
					trigger : 'axis'
				},
				legend : {
					data : [ '蒸发量', '降水量' ]
				},
				toolbox : {
					show : true,
					feature : {
						dataView : {
							show : true,
							readOnly : false
						},
						magicType : {
							show : true,
							type : [ 'line', 'bar' ]
						},
						restore : {
							show : true
						},
						saveAsImage : {
							show : true
						}
					}
				},
				calculable : true,
				xAxis : [ {
					type : 'category',
					data : result.data.dates
				} ],
				yAxis : [ {
					type : 'value'
				} ],
				series : [ {
					name : '花呗',
					type : 'bar',
					data : result.data.hbList,
					markPoint : {
						data : [ {
							type : 'max',
							name : '最大值'
						}, {
							type : 'min',
							name : '最小值'
						} ]
					},
					markLine : {
						data : [ {
							type : 'average',
							name : '平均值'
						} ]
					}
				}, {
					name : '京东白条',
					type : 'bar',
					data : result.data.jdbtList,
					markPoint : {
						data : [
						/* 	                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
						 {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3} */

						{
							type : 'max',
							name : '最大值'
						}, {
							type : 'min',
							name : '最小值'
						} ]
					},
					markLine : {
						data : [ {
							type : 'average',
							name : '平均值'
						} ]
					}
				}, {
					name : '房租',
					type : 'bar',
					data : result.data.fzList,
					markPoint : {
						data : [ {
							type : 'max',
							name : '最大值'
						}, {
							type : 'min',
							name : '最小值'
						} ]
					},
					markLine : {
						data : [ {
							type : 'average',
							name : '平均值'
						} ]
					}
				}, {
					name : '余额宝',
					type : 'bar',
					data : result.data.yebList,
					markPoint : {
						data : [ {
							type : 'max',
							name : '最大值'
						}, {
							type : 'min',
							name : '最小值'
						} ]
					},
					markLine : {
						data : [ {
							type : 'average',
							name : '平均值'
						} ]
					}
				}, {
					name : '分期乐',
					type : 'bar',
					data : result.data.fqlList,
					markPoint : {
						data : [ {
							type : 'max',
							name : '最大值'
						}, {
							type : 'min',
							name : '最小值'
						} ]
					},
					markLine : {
						data : [ {
							type : 'average',
							name : '平均值'
						} ]
					}
				}, {
					name : '信用卡',
					type : 'bar',
					data : result.data.xykList,
					markPoint : {
						data : [ {
							type : 'max',
							name : '最大值'
						}, {
							type : 'min',
							name : '最小值'
						} ]
					},
					markLine : {
						data : [ {
							type : 'average',
							name : '平均值'
						} ]
					}
				} ]
			};
			;
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}

		})

		function ajaxUtil(url, jsonData, methodName) {
			$.ajax({
				type : "POST",
				url : "http://localhost:8080/" + url,
				data : JSON.stringify(jsonData),
				dataType : 'json',
				contentType : 'application/json;charset=UTF-8',
				success : function(data) {
					methodName(data);
				}
			});
		}
	</script>
</body>
</html>